 <template>
   <div class="trainOrderException">
     <!-- 查询条件 -->
     <el-form :inline="true" :model="form" class="demo-form-inline" style="margin: 20px">
       <!-- <el-form-item label="会员编号:">
        <el-input v-model="form.name" size="mini"  placeholder="会员编号"></el-input>
      </el-form-item> -->
       <el-form-item label="订单编号:" style="margin: 0 20px 0 0">
         <el-input v-model="form.orderId" size="mini"></el-input>
       </el-form-item>
       <!-- <el-form-item label="会员姓名:" style="margin: 0 20px 0 0">
        <el-input v-model="form.name" size="mini" ></el-input>
      </el-form-item> -->
       <el-form-item label="乘客姓名:" style="margin: 0 20px 0 0">
         <el-input v-model="form.passenger" size="mini"></el-input>
       </el-form-item>
       <el-form-item label="预定车次:" style="margin: 0 20px 0 0">
         <el-input v-model="form.trainno" size="mini"></el-input>
       </el-form-item>
       <!-- <el-form-item label="订单来源:" style="margin: 0 20px 0 0">
        <el-select v-model="form.name" placeholder="请选择" size="mini" >
          <el-option
            v-for="item in orderSourceList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item> -->
       <el-form-item label="异常信息:" style="margin: 0 20px 0 0">
         <el-input v-model="form.exceptionInfo" size="mini"></el-input>
       </el-form-item>
       <el-form-item label="出发站点:" style="margin: 0 20px 0 0">
         <el-input v-model="form.departureStation" size="mini"></el-input>
       </el-form-item>
       <el-form-item label="出发时间:" style="margin: 0 20px 0 0">
         <el-date-picker size="mini" :value-format="format" v-model="form.departureTimeStart" type="date"
           placeholder="选择日期">
         </el-date-picker>--
         <el-date-picker size="mini" :value-format="format" v-model="form.departureTimeEnd" type="date"
           placeholder="选择日期">
         </el-date-picker>
       </el-form-item>
       <el-form-item label="到达站点:" style="margin: 0 20px 0 0">
         <el-input v-model="form.arrivalStation" size="mini"></el-input>
       </el-form-item>
       <el-form-item label="到达时间:" style="margin: 0 20px 0 0">
         <el-date-picker size="mini" :value-format="format" v-model="form.arrivalTimeStart" type="date"
           placeholder="选择日期">
         </el-date-picker>--
         <el-date-picker size="mini" :value-format="format" v-model="form.arrivalTimeEnd" type="date"
           placeholder="选择日期">
         </el-date-picker>
       </el-form-item>

       <el-form-item label="" style="margin: 0 20px 0 0">
         <el-button type="primary" size="mini" @click="getorderExceptionlist()">查询</el-button>
         <download-excel class="querybutton" id="querybutton" :data="dataList" :fields="json_fields"
           worksheet="My Worksheet" name="火车票异常订单表">导出
         </download-excel>
       </el-form-item>
     </el-form>
     <!-- 列表 -->
     <div class="table">
       <el-table size="mini" :header-cell-style="{
          color: '#fff',
          background: '#6090EC',
          fontSize: '11px',
          fontWeight: 'normal',
        }" :data="dataList" border>
         <!-- <el-table-column prop="exceptionId" label=""> </el-table-column> -->
         <el-table-column prop="orderId" label="订单号"> </el-table-column>
         <el-table-column prop="passenger" label="乘客姓名"> </el-table-column>
         <el-table-column prop="trainno" label="车次" width="90px">
         </el-table-column>
         <el-table-column width="100px" prop="status" label="订单状态">
           <template slot-scope="scope">
             <template v-if="scope.row.status == 'processed'">已处理</template>
             <template v-if="scope.row.status == 'untreated'">未处理</template>
           </template>
         </el-table-column>
         <el-table-column width="100px" prop="paymentorderstatus" label="支付状态">
           <template slot-scope="scope">
             <template v-if="scope.row.paymentorderstatus == 'unpaid'">未支付</template>
             <template v-if="scope.row.paymentorderstatus == 'cancelOrder'">取消支付</template>
             <template v-if="scope.row.paymentorderstatus == 'payd'">已支付</template>
           </template>
         </el-table-column>
         <el-table-column prop="departureStation" label="出发站点">
         </el-table-column>
         <el-table-column prop="departureTime" label="出发时间">
         </el-table-column>
         <el-table-column prop="arrivalStation" label="到达站点">
         </el-table-column>
         <el-table-column prop="arrivalTime" label="到达时间"> </el-table-column>

         <!-- <el-table-column width="100px" prop="sourceWay" label="订单来源">
        </el-table-column>
        <el-table-column width="100px" prop="payType" label="收款方式	">
        </el-table-column> -->
         <el-table-column width="100px" prop="sumamount" label="票款金额	">
         </el-table-column>
         <el-table-column width="130px" prop="serviceCharge" label="服务费">
         </el-table-column>
         <el-table-column width="130px" prop="depositAmount" label="预留款支付金额">
         </el-table-column>
         <!-- <el-table-column width="130px" prop="departurestationname" label="退票金额"> </el-table-column> -->
         <el-table-column width="130px" prop="exceptionInfo" label="异常信息">
         </el-table-column>
       </el-table>
       <el-pagination align="center" @size-change="handleSizeChange" @current-change="handleCurrentChange"
         :current-page="currentPage" :page-sizes="[10, 15, 20]" :page-size="pageSize"
         layout="total, sizes, prev, pager, next, jumper" :total="pageTotal">
       </el-pagination>
     </div>
   </div>
 </template>
 <script>
   export default {
     name: "trainOrderException",
     components: {},
     data() {
       return {
         //导出exel表头信息
         json_fields: {
           订单号: "exceptionId",
           乘客姓名: "passenger",
           车次: "trainno",
           订单状态: "paymentorderstatus",
           支付状态: "payAmount",
           出发站点: "departureStation",
           出发时间: "departureTime",
           到达站点: "arrivalStation",
           到达时间: "arrivalTime",
           票款金额: "sumamount",
           服务费: "serviceCharge",
           预留款支付金额: "depositAmount",
           到达站点: "arrivalStation",
           预留款支付金额: "contractPhoneOne",
           异常信息: "exceptionInfo",
         }, //导出的表格的数据
         format: "yyyy-MM-dd",
         paymentList: [{
             value: 0,
             label: "银行卡",
           },

           {
             value: 1,
             label: "语音支付",
           },
           {
             value: 2,
             label: "银联二维码支付",
           },
         ],
         orderSourceList: [{
             value: "1",
             label: "Web",
           },
           {
             value: "2",
             label: "Wap",
           },
           {
             value: "3",
             label: "IOS",
           },
           {
             value: "4",
             label: "Android",
           },
           {
             value: "5",
             label: "CRM",
           },
         ],
         // 查询数据
         form: {
           passenger: "", //乘客名称
           trainno: "", //车次
           departureStation: "", //出发站点
           departureTimeStart: "", //出发时间
           departureTimeEnd: "",
           arrivalStation: "", //到达站点
           arrivalTimeStart: "", //到达时间
           arrivalTimeEnd: "", //到达时间
           exceptionInfo: "", //异常信息
           orderId: "", //订单表主键
         },
         // 列表返回数据
         dataList: [],
         // 分页数据
         pageTotal: 0,
         pageSize: 10,
         currentPage: 1,
       };
     },
     methods: {
       // 分页
       handleSizeChange(value) {
         console.log("1", value);
         localStorage.setItem("pageSize", value);
         localStorage.setItem("pageNum", 1);
         this.getorderExceptionlist();
         this.pageSize = value;
       },
       handleCurrentChange(value) {
         console.log("2", value);
         localStorage.setItem("pageNum", value);
         localStorage.setItem("pageSize", this.pageSize);
         this.currentPage = value;
         this.getorderExceptionlist();
         // orders = res.data;
       },

       //异常订单列表接口
       getorderExceptionlist() {
         this.$axios
           .getorderExceptionlist({
             passenger: this.form.passenger,
             trainno: this.form.trainno,
             departureStation: this.form.departureStation,
             departureTimeStart: this.form.departureTimeStart,
             departureTimeEnd: this.form.departureTimeEnd,
             arrivalStation: this.form.arrivalStation,
             arrivalTimeStart: this.form.arrivalTimeStart,
             arrivalTimeEnd: this.form.arrivalTimeEnd,
             exceptionInfo: this.form.exceptionInfo,
             orderId: this.form.orderId,
           })
           .then((res) => {
             console.log(res);
             if (res.code == "200") {
               this.dataList = res.data;
               this.pageTotal = res.total;
               console.log(this.dataList);
             }
           });
       },
     },
     mounted() {
       this.getorderExceptionlist();
     },
   };
 </script>

 <style scoped>
   .table {
     padding: 0 20px 0 20px;
   }

   .querybutton {
     width: 56px;
     height: 28px;
     background-color: #409eff;
     margin: 7.5px 10px;
     font-size: 12px;
     border-radius: 3px;
     cursor: pointer;
     position: relative;
   }

   .querybutton:hover {
     background: #66b1ff;
     border-color: #66b1ff;
     color: #fff;
   }

   #querybutton {
     float: left;
     color: #fff;
     text-indent: 1rem;
     line-height: 28px;
   }

   .querybutton:active {
     /* top: 1px; *向下偏移2px *6090EC */
     background: #6090ec;
   }
 </style>